<template>
  <div class="app-container" v-loading="loading">
    <el-form
        ref="queryRef"
        :inline="true"
        :model="queryParams"
        class="form-box"
    >
      <div style="display: flex;flex-wrap: wrap">
        <el-col :span="4">
          <el-form-item>
            <el-input
                v-model="queryParams.purchaseCode"
                clearable
                placeholder="采购单号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select
                clearable
                placeholder="退货状态"
                v-model="queryParams.status"
            >
              <template v-for="(item,index) in erp_inventory_return_status" :key="index">
                <el-option :label="item.label" :value="item.value"></el-option>
              </template>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
                v-model="queryParams.skuCode"
                clearable
                placeholder="SKU编码"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
                v-model="queryParams.skuName"
                clearable
                placeholder="商品名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
                v-model="queryParams.expressName"
                clearable
                placeholder="退货快递"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
                v-model="queryParams.waybillCode"
                clearable
                placeholder="退货运单号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item class="picker">
            <el-date-picker
                style="width:100%"
                v-model="timeData"
                start-placeholder="入库日期"
                end-placeholder="入库日期"
                range-separator="-"
                type="datetimerange"
                value-format="YYYY-MM-DD HH:mm:ss"
                unlink-panels
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button icon="Search" type="primary" @click="resetQuery">查询</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </div>
    </el-form>
    <div>
      <el-button icon="Plus" type="primary" @click="handleAdd">添加入库商品
      </el-button>
    </div>
    <vxe-table style="margin-top: 10px"
               :data="tableData"
               :height="tableHeight"
               align="center"
               border
               :row-config="{isCurrent: true, isHover: true}"
    >
      <vxe-column title="序号" type="seq" width="60"></vxe-column>
      <vxe-column field="purchaseCode" width="200" title="云仓采购单号">
      </vxe-column>
      <vxe-column field="purchaseOrderCode" width="200" title="erp采购单号">
      </vxe-column>
      <vxe-column field="status" width="120" title="退货状态">
        <template v-slot="{row}">
          {{ returnDictLabel(erp_inventory_return_status, row.status) }}
        </template>
      </vxe-column>
      <vxe-column field="skuCode"  width="220" title="SKU编码"></vxe-column>
      <vxe-column field="skuName" width="240" title="商品名称"></vxe-column>
      <vxe-column field="coverUrl" width="180" title="商品图片">
        <template #default="{row}">
          <ImagePreview v-if="row.coverUrl" :width="150" :height="50" :src="row.coverUrl" ></ImagePreview>
        </template>
      </vxe-column>
      <vxe-column field="companyName"  width="150" title="公司名称" ></vxe-column>
      <vxe-column field="warehouseName" width="150" title="仓库名称"></vxe-column>
      <vxe-column field="receiptDate" width="200" title="入库日期"></vxe-column>
      <vxe-column field="returnNum" width="100" title="应退数量"></vxe-column>
      <vxe-column field="actualReturnNum" width="100" title="实退数量"></vxe-column>
      <vxe-column field="expressName" width="120" title="退货快递"></vxe-column>
      <vxe-column field="waybillCode" width="150" title="快递运单号"></vxe-column>
      <vxe-column field="receiptByName" width="120" title="收货人"></vxe-column>
      <vxe-column field="receiptPhone" width="120" title="手机号"></vxe-column>
      <vxe-column field="receiptAddress" width="120" title="收货地址"></vxe-column>

    </vxe-table>
    <pagination
        v-show="total > 0"
        v-model:limit="queryParams.pageSize"
        v-model:page="queryParams.pageNum"
        :total="total"
        @pagination="getList"
    />
    <!--    添加入库商品-->
    <addInStprageGoods v-if="isShowDialog" :isShowDialog="isShowDialog" @cancel="handleClose"></addInStprageGoods>
  </div>
</template>

<script setup>
import {onMounted, ref, nextTick, getCurrentInstance} from "vue";
import addInStprageGoods from "@/views/returnGoodsManage/inStorageReturn/addInStprageGoods.vue"
import ImagePreview from "@/components/ImagePreview/index.vue";
import {getInventoryReturnlist} from "@/api/scApi";

const {proxy} = getCurrentInstance();
const {erp_inventory_return_status} = proxy.useDict("erp_inventory_return_status");

let loading = ref(false)
let timeData = ref([])
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
})

const title = ref('')
const tableData = ref([])
const total = ref(0)

const resetQuery = () => {
  queryParams.value={
    pageNum: 1,
    pageSize: 10,
  }
  getList();
};

function getList() {
  loading.value=true
  queryParams.value.startTime=timeData.value[0]
  queryParams.value.endTime=timeData.value[1]
  let params={
    pageNum:queryParams.value.pageNum,
    pageSize:queryParams.value.pageSize,
    param:queryParams.value
  }
  getInventoryReturnlist(params).then(res=>{
    if(res.code===200){
      tableData.value =res.data
      total.value =res.total
    }
  }).finally(()=>{
    loading.value =false
  })
}

let isShowDialog = ref(false)

//新增按钮
function handleAdd() {
  isShowDialog.value = true
}

function handleClose(isReload) {
  isShowDialog.value = false
  if (isReload) {
    getList()
  }
}

let tableHeight = ref(0);
onMounted(() => {
  nextTick(() => {
    tableHeight.value = window.innerHeight - 400;
  })
  window.onresize = () => {
    tableHeight.value = document.body.scrollHeight - 400;
  }
  getList()
})
</script>

<style scoped lang="scss">

</style>